figure.Filtro = new Class({
    Extends: figure.DomFigure,

    initialize: function(id, css) {
        this.parent(id);
        this.createElement('canvas', {
            id: id,
            Width: 100,
            Height: 100,
            css: css
        });
        this.element = this.getElement();
        this.writeTag(css.top + 1.3 * figure.filtroSizes.HEIGHT_BODY, css.left + figure.filtroSizes.WIDTH_BODY / 2)
    },

    draw: function() {
        var ctx = this.element[0].getContext('2d');

        var x = 0;
        var y = 0;
        var heightEnds = figure.filtroSizes.HEIGHT_ENDS;
        var heightBody = figure.filtroSizes.HEIGHT_BODY;
        var widthEnds = figure.filtroSizes.WIDTH_ENDS;
        var widthBody = figure.filtroSizes.WIDTH_BODY;
        ctx.beginPath();
        ctx.fillStyle = "#FFFFFF";
        ctx.moveTo(x, y);
        ctx.lineTo(x + widthEnds, y);
        ctx.lineTo(x + widthEnds, y + heightEnds);
        ctx.lineTo(x, y + heightEnds);
        ctx.lineTo(x, y);
        ctx.fill();
        ctx.closePath();
        ctx.stroke();

        for (var i=0;i<20;i++)
        {
            ctx.beginPath();
            ctx.fillStyle = (i%2 == 0 ? "#FFFFFF" : "#000000");
            ctx.moveTo(x + widthEnds + i*widthBody/20, y + (heightEnds-heightBody)/2);
            ctx.lineTo(x + widthEnds + (i+1)*widthBody/20, y + (heightEnds-heightBody)/2);
            ctx.lineTo(x + widthEnds + (i+1)*widthBody/20, y + (heightEnds-heightBody)/2 + heightBody);
            ctx.lineTo(x + widthEnds + i*widthBody/20, y + (heightEnds-heightBody)/2 + heightBody);
            ctx.fill();
            ctx.closePath();
            ctx.stroke();
        }

        ctx.beginPath();
        ctx.fillStyle = "#FFFFFF";
        ctx.moveTo(x + widthBody, y);
        ctx.lineTo(x + widthEnds + widthBody, y);
        ctx.lineTo(x + widthEnds + widthBody, y + heightEnds);
        ctx.lineTo(x + widthBody, y + heightEnds);
        ctx.lineTo(x + widthBody, y);
        ctx.fill();
        ctx.closePath();
        ctx.stroke();

    }

});
